<template>
<!-- 付费咨询 的支付页面 -->
    <view>
		<view class="bg_image" >

		</view>
		<view class="card_content card_one">
			<view class="peopinfoContent">
				<view style="float: left"><image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="orderInfo.doctorImg"></image></view>
				<view class="peopinfo">
					<text style="font-weight: bold;">{{orderInfo.doctorName?orderInfo.doctorName:""}}</text>
					<text class="phone">{{orderInfo.hospitalName?orderInfo.hospitalName:""}}</text>
				</view>
				<view class="addressinfo peopinfo">
					<text style="font-size: 28rpx;">{{orderInfo.jobTitle?orderInfo.jobTitle:""}} | {{orderInfo.deptName?orderInfo.deptName:""}}</text>
				</view>
			</view>
		</view>
		<view class="card_content" style="padding: 10rpx">
		<uni-list :border="false">
			<uni-list-item :border="false" title="就诊人姓名"  :rightText="orderInfo.patientName"/>
			<uni-list-item :border="false" title="问诊类型" :rightText="orderInfo.orderType==1?'图文咨询':'用药咨询'" />
			<uni-list-item :border="false" title="权益保障" rightText="医生超过24小时未回复将自动退款" />
		</uni-list>
		</view>
		<view class="payment_button">
			<view class="combined">合计:<text class="combined_money">￥{{orderInfo.payPrice?orderInfo.payPrice:""}}</text></view>
			<!-- <view class="immediate" :disabled="disabledSave" @click="getOrderPay">立即支付</view> -->
			<button type="default" :disabled="disabledSave" @click="getOrderPay" class="immediate" 
			style="background-color: #3CB4FF;border-radius: 0;">
			    立即支付
			</button>
		</view>
		<view class="card_content_bottom">
			<view class="personal_info">
				<text class="specification gray_font">开具发票</text>
				<view class="specification" style="display: flex;" @click="toggle('bottom')">
				<view v-if="orderInfo.billType==''||orderInfo.isBill==1">本次不开具发票</view>
				<view v-if="orderInfo.billType==1">普通发票-个人</view>
				<view v-if="orderInfo.billType==2">普通发票-公司</view>
				<image style="width: 40rpx;height: 30rpx;margin-top: 5rpx;" src="../../../pagesSub/static/images/icon_right_black.png"></image>
				</view>
			</view>
			<view  v-if="orderInfo.billType==1">
				<view class="specification">发票抬头：{{orderInfo.rise?orderInfo.rise:""}}</view>
			</view>
			<view  v-if="orderInfo.billType==2">
				<view class="specification">发票抬头：{{orderInfo.unitName?orderInfo.unitName:""}}</view>
				<view class="specification">纳税人识别号：{{orderInfo.taxPayerNo?orderInfo.taxPayerNo:""}}</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" :mask-click="false">
			<view style="padding: 30rpx;">
				<view class="colse_content">
					<image @click="closeinvoice" style="width: 50rpx;height: 50rpx;float: right;"
						src="../../../pagesSub/static/images/icon_close_gray.png"></image>
				</view>
		
				<view class="personal_info">
					<text class="specification">发票类型</text>
					<text class="specification gray_font">普通发票</text>
				</view>
				<view class="personal_info">
					<text class="specification">开具发票</text>
					<view>
						<switch :checked="orderInfo.isBill==0" color="#4CCCBF" style="margin-top:-8rpx; transform:scale(0.7)"
							@change="changeInvoice" />
					</view>
				</view>
				<view v-if="orderInfo.isBill==0">
					<text class="specification">发票抬头</text>
					<view class="invoice">
						<view style="margin-right: 15rpx;"
						:class="orderInfo.billType==1?'tag':''"
						@click="invoiceType(1)"
						class="bth_green">
							个人
						</view>
						<view
						:class="orderInfo.billType==2?'tag':''"
						@click="invoiceType(2)"
						 class="bth_green">
							公司
						</view>
					</view>
					<view class="invoiceInput" v-if="orderInfo.billType==1">
					<view style="display: flex;">
						<view style="color:#FF5100;font-size: 40rpx;margin-right: 5rpx;">*</view><uni-easyinput style="width: 100%;" v-model="orderInfo.rise" placeholder="请填写开具发票人的姓名"></uni-easyinput>
					</view>
					</view>
					<view class="invoiceInput" v-if="orderInfo.billType==2">
						<view>
						<view style="display: flex;">
							<view style="color:#FF5100;font-size: 40rpx;margin-right: 5rpx;">*</view>
							<uni-easyinput style="width: 100%;" v-model="orderInfo.unitName" placeholder="请填写单位名称"></uni-easyinput>
						</view>
						</view>
						<view style="margin-top: 20rpx;">
						<view style="display: flex;">
							<view style="color:#FF5100;font-size: 40rpx;margin-right: 5rpx;">*</view>
							<uni-easyinput style="width: 100%;" type="number" v-model="orderInfo.taxPayerNo" placeholder="请填写纳税人识别号"></uni-easyinput>
						</view>
						</view>
					</view>
				</view>
				<button
				@click="saveinvoice"
				class="btn_invoice"
				type="default">修改</button>
			</view>
		</uni-popup>
<!--        <uni-section title="基础用法" type="line"></uni-section>-->
<!--        <uni-list>-->
<!--			<uni-list-item title="医生姓名" :rightText="orderInfo.doctorName" />-->
<!--			<uni-list-item title="医院" :rightText="orderInfo.hospitalName" />-->
<!--			<uni-list-item title="科室" :rightText="orderInfo.deptName" />-->
<!--			<uni-list-item title="职称" :rightText="orderInfo.jobTitle" />-->
<!--			<uni-list-item title="价格" :rightText="orderInfo.payPrice" />-->
<!--			<uni-list-item title="订单号" :rightText="orderInfo.orderNumber" />-->
<!--			<uni-list-item title="就诊人姓名(空)" :rightText="orderInfo.deptName" />-->
<!--			<uni-list-item title="问诊类型" :rightText="orderInfo.orderType" />-->
<!--			<uni-list-item title="权益保障" rightText="医生超过24小时未回复将自动退款" />-->
<!--        </uni-list>-->
<!--		<button class="binding_bank_card btn_appointment arc_button" type="primary" @click="getOrderPay">支付</button>-->
    </view>
</template>

<script>
import { TOKENNAME, HTTP_REQUEST_URL, UIDNAME } from '@/config/app.js';
import store from '@/store';
import { saveConsult,wechatOrderPay,consultOrderInfo,paySuccess, 
} from '@/api/consult.js';
import {updatebill,deletebill} from '@/api/prescribing.js';

export default {
    name: 'ConsultOrder',
    data() {
        return {
            orderInfo: {

            },
			orderId:0,
			disabledSave: false,
        };
    },
	onLoad: function(option) {
		//订单id
		this.orderId = option.id || 171;
		this.getOrderInfo();

	},
    methods: {
		//发票修改
		saveinvoice(){
			let _this=this;
			if(_this.orderInfo.billType==1){
				_this.orderInfo.unitName=="";
				_this.orderInfo.taxPayerNo=="";
				if(_this.orderInfo.rise==""){
					uni.showToast({
						title: '请填写发票抬头',
						icon: 'none',
						duration: 3000
					})
					return;
				}
			}
			if(_this.orderInfo.billType==2){
				_this.orderInfo.rise=="";
				if(_this.orderInfo.unitName==""||_this.orderInfo.taxPayerNo==""){
					uni.showToast({
						title: '请填写发票信息',
						icon: 'none',
						duration: 3000
					})
					return;
				}
			}
		
			updatebill({
				id:_this.orderId,
				billType:_this.orderInfo.billType,
				rise:_this.orderInfo.rise,
				unitName:_this.orderInfo.unitName,
				taxPayerNo:_this.orderInfo.taxPayerNo,
			}).then(res => {
					if(res.code==200){
						uni.showToast({
							title:"修改成功",
							duration:3000
						})
						this.$refs.popup.close();
						this.getOrderInfo()
					}
				})
				.catch(err => {
					uni.showToast({
						title:"修改失败",
						icon:'none',
						duration:3000
					})
					console.log("错误#",err)
				});
			// console.log("&&&&发票信息",JSON.stringify(_this.orderData))
		},
		closeinvoice(){
			this.$refs.popup.close();
			this.getOrderInfo();
		},
		// 开具发票按钮
		changeInvoice(e) {
			let _this=this;
			let orderId = _this.orderId
			if(e.target.value){
				console.log("^^^^00000")
				_this.orderInfo.isBill=0
			}else{
				console.log("^^^^111111")
				_this.orderInfo.isBill=1
				deletebill(orderId).then(res => {
						if(res.code==200){
							uni.showToast({
								title:"修改成功",
								duration:3000
							})
							this.$refs.popup.close();
							this.getOrderInfo()
						}
					})
					.catch(err => {
						console.log("错误#",err)
					});
			}
			console.log("&&&orderInfoorderInfo",JSON.stringify(_this.orderInfo))
		
			// this.isChecked = e.target.value;
		
		},
		invoiceType(type){
			this.orderInfo.billType=type;
		},
		toggle(type) {
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type)
		},
		getOrderInfo: function() {
			let _this = this;
			let orderId = _this.orderId
			uni.showLoading({
				title:'加载中'
			})
			consultOrderInfo(orderId).then(res => {
				this.orderInfo = res.data
				console.log("&&&&&&&&&订单####",JSON.stringify(this.orderInfo))
				uni.hideLoading()

			}).catch(err => {
				uni.hideLoading()
			});
		},
		getOrderPay: function() {
			let _this = this;
			_this.disabledSave = true;
			// let orderNo = _this.orderInfo.orderNumber
			let goPages = '/pagesSub-My/my/inquiryList';
			uni.showLoading({
				title:'加载中'
			})
			//请求预支付参数，并掉起微信支付
			wechatOrderPay({
				orderId: _this.orderId,
				spbillCreateIp: ''
			}).then(res => {
				let jsConfig = res.data;
				uni.requestPayment({
					timeStamp: jsConfig.timeStamp,
					nonceStr: jsConfig.nonceStr,
					package: jsConfig.package,
					signType: jsConfig.signType,
					paySign: jsConfig.paySign,
					// ticket: _this.productType==='normal'? null : jsConfig.ticket,
					success: function(ress) {
						//支付成功
						uni.hideLoading();
						 // 调用接口查询通知接口支付成功，接口修改其订单状态
						// orderData.orderNumber  || orderData.orderId
						// getNewOrderStatus(this.orderData.orderId).then(res=>{
						// 	// console.log(res,'consoleOrder调用成功res999-----')
						// })
						return _this.$util.Tips({
								title: '支付成功',
								icon: 'success'
							}, {
								tab: 5,
								url: goPages
							});
						//仅测试调用，正式环境走异步回调
						// uni.showLoading({
						// 	title:'回调中'
						// })
						// paySuccess(_this.orderId).then(res => {
						// 	uni.hideLoading();
						// 	return _this.$util.Tips({
						// 		title: '支付回调成功',
						// 		icon: 'success'
						// 	}, {
						// 		tab: 5,
						// 		url: goPages
						// 	});
						// }).cache(err => {
						// 	uni.hideLoading();
						// 	return _this.$util.Tips({
						// 		title: err
						// 	});
						// })

					},
					fail: function(e) {
						_this.disabledSave = false;
						uni.hideLoading();
						return _this.$util.Tips({
							title: '取消支付'
						}, {
							tab: 5,
							url: goPages + '&status=2'
						});
					},
					complete: function(e) {
						uni.hideLoading();
						
						//关闭当前页面跳转至订单状态
						if (e.errMsg == 'requestPayment:cancel') {
							_this.disabledSave = false;
							return _this.$util.Tips({
									title: '取消支付'
								}, {
									tab: 5,
									url: goPages + '&status=2'
								});
						}
						
					},
				})
			}).catch(err => {
				_this.disabledSave = false;
				uni.hideLoading();
				return _this.$util.Tips({
					title: err
				});
			});
		}
    }
};
</script>

<style lang="scss" scoped>
@import '@/static/css/style.css';
/deep/.uni-forms-item__inner[data-v-61dfc0d0] {
    border-bottom: 0;
}
/deep/.uni-list-item__extra-text {
    font-size: 28rpx;
}
/deep/.uni-list-item__content-title {
    font-size: 29rpx;
}
button::after { border: none }
.card_content{
	background-color: #FFFFFF;
	padding: 30rpx;
	margin: 30rpx;
	border-radius: 10rpx;
}
.card_one{
	margin-top: -100rpx;
}
.peopinfoContent{
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #FBFBFB;
}
.peopinfo{
	font-size: 33rpx;
	margin-left: 100rpx;
}
.addressinfo{
	font-size: 32rpx;
	margin-top: 5rpx;
}
.phone{
	margin-left: 30rpx;
	font-size: 28rpx;
}
.bg_image{
	background-image: url(../../../pagesSub/static/images/bg_menzhen@2x.png);
	height:120rpx;
	background-size: 100% 100%;
	color:#FFFFFF;
	padding: 30rpx;
}
.combined{
	font-size: 30rpx;
	text-align: center;
	line-height: 80rpx;
	width: 40%;
	background-color: #FFFFFF;
}
.combined_money{
	font-weight: bold;
	color: #5CC8B3;
}
.immediate{
	background: -webkit-linear-gradient(#77E2A4, #4CCDBC);
	color: #FFFFFF;
	line-height: 80rpx;
	font-size: 35rpx;
	width: 60%;
	text-align: center;
}
.payment_button{
	width: 100%;
	display: flex;
	position: fixed;
	bottom: 0;
	 padding-bottom: constant(safe-area-inset-bottom);
	 padding-bottom: env(safe-area-inset-bottom);
	box-sizing:content-box;
	height: 80rpx;
}
.payment_button::after{
	content:"";
	display: block;
	clear:both;
}
.example {
    margin: -100rpx 20rpx;
    border-radius: 30rpx;
}
.btn_appointment{
	margin-top: 40rpx;
	background: -webkit-linear-gradient(#77E2A4, #4CCDBC);
	color: #FFFFFF;
}
.imageBoxView {
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    padding: 30rpx 30rpx;
    background-color: #fff;
}


.imageTips {
    padding: 0 50rpx;
    font-size: 24rpx;
    line-height: 16px;
}

//个人简介
.personInfoView {
    border-bottom-left-radius:30rpx;
    border-bottom-right-radius:30rpx;
    margin-bottom: 10rpx;
    background-color: #fff;
    padding-bottom: 40rpx;
    .image-contain {
        // margin-top: 5px;
        background-color: #fff;
        h4 {
            font-size: 16px;
            line-height: 36px;
        }

    }
    .bgc{
         // padding: 30rpx;
    }
    .textArea {
        // padding:20rpx;
        border-radius: 20rpx;
        width: 90%;
        // height: 50px;
        background-color: #eee;
        padding: 20rpx;
    }
    .count{
        padding-right: 30rpx;
        font-size: 32rpx;
        color: #aaa;
        display: flex;
        justify-content: flex-end;
        margin-bottom:-30rpx;
    	position:relative;
    	top:-44rpx;
    	left:-12rpx;
    }

}

// 下一步按钮
.button {
    background-color: #fff;
    margin-bottom: 50rpx;
    padding: 10rpx 0 10rpx;
}
.stateBtn {
    border-radius: 50px;
    margin-bottom: 50rpx;
}
.card_content_bottom{
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}
	.personal_info{
		display: flex;
		justify-content: space-between;
	}
	.specification{
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	.bth_green{
		border-top-right-radius:40rpx;
		border-bottom-right-radius:40rpx;
		border-top-left-radius:40rpx;
		border-bottom-left-radius:40rpx;
		border: 1rpx solid #4CCCBF;
		background-color: #FFFFFF;
		color: #4CCCBF;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		padding: 0 25rpx;
	}
	.invoice{
		display: flex;
		margin: 10rpx 0;
	}
	.btn_invoice{
		color: #FFFFFF;
		background-color:#4CCDBC;
		font-size: 30rpx;
		margin-top: 60rpx;
		margin-bottom: 30rpx;
	}
	.invoiceInput{
		margin-top: 30rpx;
	}
	.tag{
		color: #FFFFFF !important;
		background-color: #4CCCBF !important;
	}
	/deep/.uni-easyinput__content-input.data-v-abe12412 {
		font-size: 30rpx;
	}
	.colse_content::after{
			display: block;
			clear: both;
			content: "";
		}
</style>
